<template>
    <a-drawer
        id="add_machine_drawer"
        width="95%"
        title="设备批导入管理"
        placement="right"
        :visible="modal_show"
        @close="onCancle"
        :destroyOnClose="true"
        :body-style="{ paddingBottom: '80px' }"
        :footer-style="{ textAlign: 'right' }"
        >
        <a-table 
          :data-source="machine_data" 
          :columns="machine_columns" 
          class="task-table"
          size="small" 
          :showHeader="true" 
          tableLayout="fixed"
          bordered 
          rowKey="key">
          <template #expandedRowRender="{ record }">
            <a-layout-content style="margin: 10px;">
              <a-tabs v-model:activeKey="machine_tab_activeKey">
                <a-tab-pane key="11" tab="额外信息">
                  <a-descriptions title="设备信息" bordered class="overflow-descriptions" style="overflow: auto;height: 400px;" :column="6">
                    <a-descriptions-item label="机柜位置">{{ record?.wz }}</a-descriptions-item>
                    <a-descriptions-item label="品牌" >{{ record.pp }}</a-descriptions-item>
                    <a-descriptions-item label="型号" >{{ record.xh }}</a-descriptions-item>
                    <a-descriptions-item label="序列号" >{{ record.xlh }}</a-descriptions-item>
                    <a-descriptions-item label="入库时间" >{{ record.sj }}</a-descriptions-item>
                    <a-descriptions-item label="设备用途" >{{ record.yt }}</a-descriptions-item>
                    <a-descriptions-item label="操作系统类型" >{{ record.op }}</a-descriptions-item>
                    <a-descriptions-item label="存储容量" >{{ record.cc }}</a-descriptions-item>
                    <a-descriptions-item label="存储使用量" >{{ record.ccsy }}</a-descriptions-item>
                    <a-descriptions-item label="其他说明" >{{ record.sm }}</a-descriptions-item>
                  </a-descriptions>
                </a-tab-pane>
                <a-tab-pane key="12" tab="网络信息">
                    <a-table 
                    :data-source="record?.nets" 
                    :columns="net_columns" 
                    class="task-table"
                    size="small" 
                    :showHeader="true" 
                    tableLayout="fixed"
                    bordered 
                    rowKey="net">
                    </a-table>
                </a-tab-pane>
              </a-tabs>
            </a-layout-content>
          </template>
          <template #bodyCell="{ text, record, index, column }">
              <template v-if="column.dataIndex === 'operation'">
              <span class="table-operation">
                  <a-dropdown>
                  <a class="ant-dropdown-link" @click.prevent>编辑<DownOutlined /></a>
                  <template #overlay>
                      <a-menu>
                          <a-menu-item>
                            <a href="javascript:;" @click="delete_machine(record, index)">设备删除</a>
                          </a-menu-item>  
                      </a-menu>
                  </template>
                  </a-dropdown>
              </span>
              </template> 
          </template>
        </a-table>
        <template #extra>
            <a-space>
                <a-button @click="onCancle">取消</a-button>
                <a-button type="primary" @click="onConfirm">确认</a-button>
            </a-space>
        </template>
    </a-drawer>
</template>
<script>
export default {
    data() {
        return {
            modal_show: false,
            keys:{},
            machine_data:[],
            machine_columns: [
                {
                title: '设备名称',
                dataIndex: 'name',
                align: 'center',
                width: '80px',
                ellipsis: true,
                },
                {
                title: '设备别名',
                dataIndex: 'aname',
                align: 'center',
                width: '210px',
                ellipsis: true,
                },
                {
                title: '机房编号',
                dataIndex: 'jfbm',
                align: 'center',
                width: '60px',
                ellipsis: true,
                },
                {
                title: '设备编号',
                dataIndex: 'bh',
                align: 'center',
                width: '140px',
                ellipsis: true,
                },
                {
                title: '管理者',
                dataIndex: 'glz',
                align: 'center',
                width: '170px',
                ellipsis: true,
                },
                {
                title: '使用者',
                dataIndex: 'syz',
                align: 'center',
                width: '140px',
                },
            

                {
                    title: '设备类型',
                    dataIndex: 'type',
                    align: 'center',
                    width: '140px',
                },
                {
                    title: '设备状态',
                    dataIndex: 'status',
                    align: 'center',
                    width: '100px',
                },
                {
                    title: '操作',
                    width: 80,
                    dataIndex: 'operation',
                    align: 'center'
                },
            ],
            net_columns: [
                {
                title: '网络名',
                dataIndex: 'net',
                align: 'center',
                width: '120px',
                ellipsis: true,
                },
                {
                title: '网络带宽',
                dataIndex: 'netdk',
                align: 'center',
                width: '210px',
                ellipsis: true,
                },
                {
                title: '线缆类型',
                dataIndex: 'netlt',
                align: 'center',
                width: '60px',
                ellipsis: true,
                },
                {
                title: '端口类型',
                dataIndex: 'netpt',
                align: 'center',
                width: '140px',
                ellipsis: true,
                },
                {
                title: '本端端口',
                dataIndex: 'ap',
                align: 'center',
                width: '170px',
                ellipsis: true,
                },
                {
                title: '对端设备',
                dataIndex: 'bname',
                align: 'center',
                width: '140px',
                },
                {
                    title: '对端端口',
                    dataIndex: 'bp',
                    align: 'center',
                    width: '140px',
                },
            ],
            machine_tab_activeKey:"11",
        };
    },
    beforeUnmount() {
        this.$mitt.off('badd_machine_drawer');
    },
    mounted() {
        this.$mitt.on('badd_machine_drawer', _value => {
            this.modal_show=true;
            
            this.keys=_value?.keys
            this.machine_data=_value?.rows



        });
    },
    methods: {
        onCancle(){
            this.modal_show=false
        },
        onConfirm(){
            let new_rows=[]
            for (let i = 0; i < this.machine_data.length; i++) {
                let element = this.machine_data[i];
                
                let new_element=JSON.parse(JSON.stringify(element))
                new_element.jfbm=this.keys?.jfbm
                new_element.jfbm2=this.keys?.jfbm2
                new_rows.push(new_element)
            }
            this.$mitt.emit('badd_machine_drawer_result', new_rows);
            this.modal_show=false
        },
        delete_machine(record,index){
            this.machine_data.splice(index,1)
        },
    },
};
</script>